.main {
  .main-wrapper {
    .content-wrapper {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 70px;
      gap: 35px;

      .content-sidebar {
        width: 276px;
        padding-bottom: 20px;
      }

      .content-main {
        position: relative;
        flex: 1;
        padding-bottom: 100px;
      }
    }
  }
}

// ================================================================================
// breakpoints: 1024 768 640 480 375 320
// ================================================================================
@media (max-width: 1300px) {
  .main {
    .main-wrapper {
      padding: 0 20px;
    }
  }
}
@media (max-width: 1023px) {
  .main {
    .main-wrapper {
      .content-wrapper {
        position: relative;
        gap: 0;
        align-items: stretch;
        flex-direction: column;
        display: block;
        // overflow: hidden;
        width: 100%;
        margin: 30px auto 0 auto;
        .content-sidebar {
          position: fixed;
          z-index: 100;
          width: 0;
          height: 0;
          top: 0;
          left: -1px;
          padding: 0;
        }
        .content-main {
          position: relative;
          flex: 1;
          padding-bottom: 100px;
        }
      }
    }
  }
}
@media (max-width: 768px) {
  .main {
    .main-wrapper {
      .content-wrapper {
        margin: 5vw auto 0 auto;
      }
    }
  }
}
